<template>
  <el-select
    v-model="selectVal"
    filterable
    size="mini"
    clearable
    placeholder="请选择"
    remote
    :style="{'width': `${width}px`}"
    :remote-method="fifterMethod"
    :disabled="disabled"
    :multiple="multiple"
    @change="changeValue"
  >
    <el-option
      v-for="item in list"
      :key="item.code"
      :label="item.label"
      :value="item.value"
      class="option"
      @click.native="log(item)"
    >
      <span style="float: left; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      <span class="label" :title="item.label" style="float: right">{{ item.label }}</span>
    </el-option>
    <el-pagination
      v-if="refresh"
      class="pagination"
      :current-page="pagination.pageNum"
      :page-size="pagination.pageSize"
      layout="total, prev, pager, next"
      :total="pagination.total"
      :pager-count="5"
      @current-change="handleCurrentChange"
    />
  </el-select>
</template>

<script>
export default {
  name: 'PageSelect',
  props: {
    data: {
      type: [String, Array],
      require: true,
      default: ''
    },
    elseData: {
      type: [String, Array],
      default: ''
    },
    disabled: {
      type: [String, Boolean],
      default: false
    },
    multiple: {
      type: [String, Boolean],
      default: false
    },
    getOptions: {
      type: Function,
      require: true,
      default: function() {}
    },
    searchName: {
      type: String,
      require: true,
      default: ''
    },
    label: {
      type: String,
      require: true,
      default: ''
    },
    value: {
      type: String,
      require: true,
      default: ''
    },
    dataFields: {
      type: String,
      default: 'list'
    },
    noFields: {
      type: [String, Boolean],
      default: false
    },
    width: {
      type: String,
      default: '120'
    },
    hasElseData: {
      type: [String, Boolean],
      default: false
    }
  },
  data() {
    return {
      selectVal: '',
      list: [],
      loading: false,
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      currentSearchString: '',
      refresh: true
    }
  },
  created() {
    this.selectVal = this.data
  },
  methods: {
    handleCurrentChange(val) {
      this.fifterMethod(null, val, false)
    },
    changeValue(val) {
      if (this.hasElseData) {
        this.$emit('update:elseData', val)
      } else {
        this.$emit('update:data', val)
      }
      this.$emit('changeValue', val)
    },
    async fifterMethod(val, pageNum, isBack = true) {
      if (isBack) {
        this.pagination.pageNum = 1
        this.refresh = false
        this.$nextTick(() => {
          this.refresh = true
        })
      }
      this.currentSearchString = val || this.currentSearchString
      const params = {
        pageSize: this.pagination.pageSize,
        pageNum: pageNum || this.pagination.pageNum
      }
      params[this.searchName] = this.currentSearchString
      this.list
      this.pagination.total
      try {
        this.loading = true
        const { data } = await this.getOptions(params)
        if (data.code === 200) {
          if (this.noFields) {
            this.list = data.data.map(item => ({ label: item[this.label], value: item[this.value] }))
          } else {
            this.list = data.data[this.dataFields].map(item => ({ label: item[this.label], value: item[this.value] }))
          }
          this.pagination.total = data.data.total
        } else {
          console.log(data)
        }
        this.loading = false
      } catch (error) {
        this.loading = false
        console.log('page-select获取数据失败', error)
      }
    },
    updateSelectVal(val) {
      console.log(val)
      this.selectVal = val
    },
    log(item) {
      if (this.hasElseData) {
        this.$emit('update:data', item.label)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.label{
  display: inline-block;
  max-width: 360px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
